<template>
    <div>
        <div class='container'>
            <div class='handle-box'>
                商品编号：
                <el-input v-model='query.productCode' placeholder='商品编号' class='handle-input mr10' style='width: 150px'
                          prefix-icon='el-icon-search'></el-input>
                商品名称：
                <el-input v-model='query.productName' placeholder='商品名称' class='handle-input mr10' style='width: 150px'
                          prefix-icon='el-icon-search'></el-input>
                有无库存：
                <el-select v-model='query.haveStock' placeholder='有无库存'
                           class='handle-select mr10' style='width: 150px'>
                    <el-option key='1' label='有' value='1'></el-option>
                    <el-option key='0' label='无' value='0'></el-option>
                </el-select>

                是否启用：
                <el-select v-model='query.status' placeholder='是否启用'
                           class='handle-select mr10' style='width: 150px'>
                    <el-option key='1' label='是' value='1'></el-option>
                    <el-option key='0' label='否' value='0'></el-option>
                </el-select>

                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click='resetSearch'>重置</el-button>
            </div>

            <div style='margin-bottom: 20px'>
                <el-button type='primary' class='el-icon-circle-plus-outline' @click='handleAddProduct()'>添加商品
                </el-button>
                <el-button type='primary' class='el-icon-circle-check' @click='handleBatchPutaway()'>批量上架</el-button>
                <el-button type='danger' class='el-icon-circle-close' @click='handleBatchShelves()'>批量下架</el-button>
            </div>


            <el-table
                :data='tableData'
                style='width: 100%;
                margin-bottom: 20px;'
                row-key='id'
                border
                default-expand-all
                @selection-change='handleSelectionChange'
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type='selection' width='55' align='center'></el-table-column>
                <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                <el-table-column v-if='false'
                                 prop='productId'
                                 label='productId'
                                 sortable>
                </el-table-column>
                <el-table-column prop='status'
                                 align='center'
                                 width='185'
                                 label='状态'>
                    <template slot-scope='scope'>
                        <el-switch
                            v-model='scope.row.status'
                            @change='handleSwitch(scope)'
                            active-text='启用'
                            inactive-text='停用'>
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    prop='productUrl'
                    label='商品图片'
                    align='center'
                >
                    <template width='90' slot-scope='scope'>
                        <img style='width:80px;height:80px;border:none;' :src='scope.row.productUrl'>
                    </template>
                </el-table-column>
                <el-table-column
                    prop='productCode'
                    label='商品编码'
                    align='center'
                    sortable
                >
                </el-table-column>
                <el-table-column
                    prop='productName'
                    label='商品名称'
                    align='center'
                >
                </el-table-column>
                <el-table-column
                    prop='realProductMoney'
                    label='商品销售价（元）'
                    width='145px'
                    align='center'
                    sortable>
                    <template slot-scope="scope">
                         <span style='color: sandybrown'>
                    {{ scope.row.realProductMoney | priceFilter }}
                         </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop='speck'
                    label='单位'
                    sortable
                    align='center'>
                </el-table-column>
                <el-table-column
                    prop='realStock'
                    label='库存数'
                    sortable
                    align='center'>
                </el-table-column>
                <!--工具栏-->
                <el-table-column label='操作' align='center'>
                    <template slot-scope='scope'>
                        <el-button
                            v-if='scope.row.id!=0'
                            type='text'
                            icon='el-icon-edit'
                            class='yellow'
                            @click='handleEdit(scope.$index, scope.row)'
                        >编辑
                        </el-button>
                        <el-button
                            v-if='scope.row.id!=0'
                            type='text'
                            icon='el-icon-edit'
                            class='yellow'
                            @click='handleWarehouse(scope.$index, scope.row)'
                        >管理仓库
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>

        </div>
        <add-product ref='addProductDialog' @get-data='getData'></add-product>
        <update-product ref='updateProductDialog' @get-data='getData'></update-product>
        <add-warehouse ref='addWarehouseDrawer' @get-data='getData'></add-warehouse>
    </div>
</template>

<script>
import addProduct from './AddProduct';
import updateProduct from './UpdateProduct';
import addWarehouse from './AddWarehouse';
import global from '../common/Global';

export default {
    name: 'ProductManager',
    components: {
        addProduct,
        updateProduct,
        addWarehouse
    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],//多选值
            query: {
                productCode: '',
                productName: '',
                haveStock: '',
                status: '',
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,//分页总数
            BASIC_SERVER: global.BASIC_SERVER,//请求服务名
            IMG_URL: global.IMG_URL//全局默认图片
        };
    },
    mounted() {
        this.global.saveFunLog(this.global.FUN_LOG_ENUM.PRODUCT_MANAGER);
        this.getData();
    },
    //过滤器
    filters: {
        priceFilter(d) {
            return '￥'+d.toFixed(2);
        }
    },
    methods: {
        // 给数据表格赋值
        getData: function() {
            this.$http.post(this.BASIC_SERVER + '/productController/selectPageProduct.json', this.query).then(res => {
                if (res.data.status) {
                    if (res.data.data != null && res.data.data != undefined) {
                        console.log(1);
                        const data = new Array();
                        for (const dataKey of res.data.data) {
                            if (dataKey['productUrl'] === null || dataKey['productUrl'] === undefined) {
                                dataKey['productUrl'] = this.IMG_URL;
                            }
                            if (dataKey['status'] === '1') {
                                dataKey['status'] = true;
                            } else {
                                dataKey['status'] = false;
                            }
                            data.push(dataKey);
                        }
                        this.tableData = data;//数据
                    } else {
                        this.tableData = res.data.data;
                    }
                    this.pageTotal = res.data.count;//总数
                }
            });
        },
        //添加商品
        handleAddProduct() {
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.addProductDialog.init();
            });
        },
        //编辑商品
        handleEdit(scope, row) {
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.updateProductDialog.init(row);
            });
        },
        //管理仓库
        handleWarehouse(scope, row) {
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.addWarehouseDrawer.init(row.productId);
            });
        },
        //拦截开关
        handleSwitch(scope) {
            const ids = new Array();
            ids.push(scope.row.productId);
            const param = new Object();
            param.ids = ids;
            param.flag = scope.row.status;
            this.$http.post(this.BASIC_SERVER + '/productController/updateProductStatus.json', param).then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                }
            });
        },
        //批量下架
        handleBatchShelves() {
            const select = this.multipleSelection;
            if (select.length < 1) {
                this.$message.error('请至少选择一条数据');
            }
            const ids = new Array();
            for (const m of select) {
                ids.push(m['productId']);
            }
            const param = new Object();
            param.ids = ids;
            param.flag = false;
            this.$http.post(this.BASIC_SERVER + '/productController/updateProductStatus.json', param).then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                    this.getData();
                }
            });
        },
        //批量上架
        handleBatchPutaway() {
            const select = this.multipleSelection;
            if (select.length < 1) {
                this.$message.error('请至少选择一条数据');
            }
            const ids = new Array();
            for (const m of select) {
                ids.push(m['productId']);
            }
            const param = new Object();
            param.ids = ids;
            param.flag = true;
            this.$http.post(this.BASIC_SERVER + '/productController/updateProductStatus.json', param).then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                    this.getData();
                }
            });
        },
        //选中事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);//重置为首页
            this.getData();//重新请求赋值
        },

        // 触发重置按钮
        resetSearch() {
            this.query.productCode = '';
            this.query.productName = '';
            this.query.haveStock = '';
            this.query.status = '';
            this.$set(this.query, 'pageIndex', 1);//重置为首页
            this.getData();//重新请求赋值
        },
        // 分页导航 ES0为开始页
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
</script>


<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
